<template>
  <div class="company-list-page">
    <!-- 顶部导航栏 -->
    <!-- <div class="page-header">
      <div class="header-left" @click="$router.go(-1)">
        <van-icon name="arrow-left" size="18" color="#333"/>
      </div>
      <div class="header-title">白蚁防治企业</div>
      <div class="header-right"></div>
    </div>-->
    <van-nav-bar
      title="白蚁防治企业"
      left-text="返回"
      left-arrow
      fixed
      placeholder
    >
      <template #left>
        <van-icon
          name="arrow-left"
          size="18"
          color="#333"
          @click="$router.go(-1)"
        />
      </template>
      <template #right></template>
    </van-nav-bar>
    <div class="dropDowm">
      <van-dropdown-menu active-color="#1989fa">
        <van-dropdown-item
          v-model="params.belongRegion"
          :options="statusList"
          @change="changeStatus"
        />
        <van-dropdown-item
          v-model="params.type"
          :options="projectList"
          @change="changeProject"
        />
      </van-dropdown-menu>
    </div>

    <!-- 内容区域包装器 -->
    <div class="content-wrapper">
      <!-- 企业列表内容 -->
      <div class="company-content">
        <div class="item" v-for="item in companyList" :key="item.id">
          <div class="companyTit">{{ item.controlName }}</div>

          <!-- 企业信息区域 -->
          <div class="company-info">
            <!-- 最高荣誉 -->
            <div class="info-item">
              <img
                src="@/assets/images/honer.png"
                class="info-icon"
                alt="荣誉"
              />
              <span class="info-label">最高荣誉：</span>
              <span class="info-value">{{ item.belongRegion }}</span>
            </div>

            <!-- 任务单总量 -->
            <div class="info-item">
              <img
                src="@/assets/images/count.png"
                class="info-icon"
                alt="数量"
              />
              <span class="info-label">近一年受理白蚁任务单总量：</span>
              <span class="info-value">{{ item.orderNumber }}</span>
            </div>

            <!-- 满意率 -->
            <div class="info-item">
              <img
                src="@/assets/images/satisfied.png"
                class="info-icon"
                alt="赞"
              />
              <span class="info-label">近一年受理任务单总量的治理满意率：</span>
              <span class="info-value">{{ item.satisfactionRate }}</span>
            </div>

            <!-- 企业情况 -->
            <div class="info-item">
              <img
                src="@/assets/images/Introduction.png"
                class="info-icon"
                alt="企业"
              />
              <span class="info-label">企业情况：</span>
              <span class="info-value">企业荣誉、具体情况</span>
              <span class="seedetail" @click="handleGo(item)">查看</span>
            </div>
          </div>

          <!-- 展开内容区域 -->
          <div v-if="item.expanded" class="expanded-content">
            <!-- 联系方式区域 -->
            <div class="contact-info">
              <!-- 联系电话 -->
              <div class="contact-item">
                <img
                  src="@/assets/images/phone.png"
                  class="contact-icon"
                  alt="联系电话"
                />
                <span class="contact-label">联系电话：</span>
                <span class="contact-value">{{ item.contactNumber }}</span>
                <img
                  src="@/assets/images/phone2.png"
                  class="call-icon"
                  alt="拨打电话"
                  @click="makeCall(item.contactNumber)"
                />
              </div>

              <!-- 企业地址 -->
              <div class="contact-item">
                <img
                  src="@/assets/images/location.png"
                  class="contact-icon"
                  alt="企业地址"
                />
                <span class="contact-label">企业地址：</span>
                <span class="contact-value">{{ item.address }}</span>
              </div>
            </div>

            <!-- 收费标准 -->
            <div class="fee-section">
              <div class="section-title">收费标准</div>
              <div class="image-list">
                <div
                  v-for="(image, index) in item.images"
                  :key="index"
                  class="image-item"
                  @click="previewImages(item.images, index)"
                >
                  <img :src="image" :alt="`收费标准 ${index + 1}`" />
                </div>
              </div>
            </div>
          </div>

          <div class="expand-btn">
            <div class="radius" @click="toggleExpand(item)">
              <van-icon
                :name="item.expanded ? 'arrow-up' : 'arrow-down'"
                class="myIcon"
                size="16"
                color="#999"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <van-tabs v-model="active" color="#1890FF" title-active-color="#1890FF">
      <van-tab title="基础信息">
        <firstPage></firstPage>
      </van-tab>
      <van-tab title="标签 2">
        <template #title>
          <van-image width="72" height="72" src="https://img01.yzcdn.cn/vant/cat.jpeg"/>
        </template>
      </van-tab>
      <van-tab title="标签 3">
        <template #title>
          <van-image width="72" height="72" src="https://img01.yzcdn.cn/vant/cat.jpeg"/>
        </template>
        <thirdPage></thirdPage>
      </van-tab>
    </van-tabs> -->
  </div>
</template>
<script>
// import firstPage from "./components/firstPage";
// import thirdPage from "./components/thirdPage";
import { termite } from "@/api/index";
export default {
  // components: { firstPage },
  data() {
    return {
      active: 0,
      params: {
        belongRegion: "",
        type: "",
      },
      statusList: [
        { text: "全部区域", value: "" },
        { text: "浦东新区", value: "浦东新区" },
        { text: "黄浦区", value: "黄浦区" },
        { text: "静安区", value: "静安区" },
        { text: "徐汇区", value: "徐汇区" },
        { text: "长宁区", value: "长宁区" },
        { text: "普陀区", value: "普陀区" },
        { text: "虹口区", value: "虹口区" },
        { text: "杨浦区", value: "杨浦区" },
        { text: "闵行区", value: "闵行区" },
        { text: "宝山区", value: "宝山区" },
        { text: "嘉定区", value: "嘉定区" },
        { text: "金山区", value: "金山区" },
        { text: "松江区", value: "松江区" },
        { text: "青浦区", value: "青浦区" },
        { text: "奉贤区", value: "奉贤区" },
        { text: "崇明区", value: "崇明区" },
      ],
      projectList: [
        { text: "默认排序", value: "" },
        { text: "按荣誉", value: 1 },
        { text: "按业绩", value: 2 },
        { text: "按好评", value: 3 },
        { text: "其他", value: 4 },
      ],
      companyList: [
        {
          companyName: "上海上昆杀虫科技有限公司",
          phone: "18979897987",
          location: "三林路337号601室",
          zizhi: "企业荣誉、具体情况",
          honor: "全国xxxx奖",
          taskCount: 10,
          satisfactionRate: 100,
          images: [
            "https://picsum.photos/200/200?random=1",
            "https://picsum.photos/200/200?random=2",
            "https://picsum.photos/200/200?random=3",
          ],
          expanded: false,
          id: 1,
        },
        {
          companyName: "上海白蚁防治有限公司",
          phone: "13800138000",
          location: "浦东新区张江高科技园区",
          zizhi: "企业资质、具体资质情况",
          honor: "上海市优秀企业",
          taskCount: 25,
          satisfactionRate: 98,
          images: [
            "https://picsum.photos/200/200?random=4",
            "https://picsum.photos/200/200?random=5",
            "https://picsum.photos/200/200?random=6",
          ],
          expanded: false,
          id: 2,
        },
      ],
    };
  },
  created() {
    this.getCompanyList();
  },
  methods: {
    getCompanyList() {
      termite.getCompanyList(this.params).then((res) => {
        if (res.errorCode === "000000") {
          this.companyList = res.data.map((item) => {
            return {
              ...item,
              expanded: false,
            };
          });
        }
      });
    },
    changeStatus(value) {
      console.log("选择的区域:", value);
      this.params.belongRegion = value;
      this.getCompanyList();
      // 这里可以根据选择的区域筛选数据
    },
    changeProject(value) {
      console.log("选择的排序:", value);
      this.params.type = value;
      this.getCompanyList();
      // 这里可以根据选择的排序方式对数据进行排序
    },
    handleGo(item) {
      console.log(item, "0000");
      this.$router.push({
        name: "qualifiCation",
        query: { title: item.controlName, controlId: item.controlId },
      });
    },
    toggleExpand(company) {
      company.expanded = !company.expanded;
    },
    previewImages(images, startPosition) {
      import("vant").then(({ ImagePreview }) => {
        ImagePreview({
          images,
          startPosition,
          closeable: true,
          closeIconPosition: "top-right",
        });
      });
    },
    makeCall(phone) {
      // 创建电话链接
      const phoneLink = `tel:${phone}`;
      // 尝试拨打电话
      window.location.href = phoneLink;
      // 如果无法拨打电话，显示提示
      this.$toast({
        message: `正在拨打 ${phone}`,
        type: "success",
      });
    },
  },
};
</script>

<style lang="less" scoped>
.company-list-page {
  background-color: #f5f5f5;
  height: 100vh;
}

.page-header {
  display: flex;
  align-items: center;
  height: 44px;
  background-color: #fff;
  border-bottom: 1px solid #f0f0f0;
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 0 16px;

  .header-left {
    width: 44px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: -16px;
    cursor: pointer;
  }

  .header-title {
    flex: 1;
    text-align: center;
    font-family:
      PingFangSC,
      PingFang SC;
    font-weight: 500;
    font-size: 17px;
    color: #333;
  }
}
.dropDowm {
  background-color: #fff;
  border-bottom: 1px solid #f0f0f0;
  position: fixed;
  top: 46px; /* 导航栏高度 */
  left: 0;
  right: 0;
  z-index: 99;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
  ::v-deep .van-dropdown-menu__bar {
    box-shadow: none !important;
  }
}

.content-wrapper {
  padding: 0 16px;
  margin-top: 60px; /* 导航栏(46px) + 筛选栏(46px) 的高度 */
}

.company-content {
  padding-top: 16px;
  padding-bottom: 16px;
}

.item {
  padding: 16px 16px 0 16px;
  background: #fff;
  border-radius: 8px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);

  &:last-child {
    margin-bottom: 0;
  }

  .companyTit {
    color: #333333;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
    line-height: 1.4;
  }

  .company-info {
    margin-bottom: 16px;

    .info-item {
      display: flex;
      align-items: center;
      margin-bottom: 12px;
      font-size: 14px;

      .info-icon {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        display: block;
        object-fit: contain;
      }

      .info-label {
        color: #666;
        margin-left: 8px;
        flex-shrink: 0;
      }

      .info-value {
        color: #333;
        // font-weight: 500;
        margin-left: 4px;
      }
    }
  }

  .expanded-content {
    margin-top: 16px;
  }

  .contact-info {
    border-top: 1px solid #f0f0f0;
    padding-top: 16px;

    .contact-item {
      display: flex;
      align-items: center;
      margin-bottom: 8px;
      font-size: 14px;

      .contact-icon {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        display: block;
        object-fit: contain;
      }

      .contact-label {
        color: #666;
        margin-left: 8px;
        flex-shrink: 0;
      }

      .contact-value {
        color: #333;
        // font-weight: 500;
        margin-left: 4px;
        // flex: 1;
      }

      .call-icon {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
        display: block;
        object-fit: contain;
        margin-left: 6px;
        cursor: pointer;
        padding: 4px;
        border-radius: 4px;
        transition: all 0.2s;

        &:hover {
          transform: scale(1.15);
        }

        &:active {
          transform: scale(0.95);
        }
      }
    }
  }
}

.fee-section {
  // margin-top: 16px;
  // padding-top: 16px;

  .section-title {
    margin-bottom: 12px;
    font-family:
      PingFangSC,
      PingFang SC;
    font-weight: 600;
    font-size: 16px;
    color: #333;
  }

  .image-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    .image-item {
      width: calc((100% - 24px) / 3);
      height: 100px;
      border-radius: 8px;
      overflow: hidden;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      transition:
        transform 0.2s,
        box-shadow 0.2s;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      }

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 8px;
      }
    }
  }
}

.expand-btn {
  cursor: pointer;
  position: relative;
  overflow: hidden;
  margin-top: 16px;
  display: flex;
  justify-content: center;

  .radius {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;

    &:hover {
      background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
      transform: scale(1.05);
    }
  }

  .myIcon {
    transition: transform 0.3s ease;
  }
}

.seedetail {
  font-family:
    PingFangSC,
    PingFang SC;
  font-size: 14px;
  font-weight: 500;
  margin-left: 8px;
  color: #1890ff;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s ease;

  &:hover {
    background-color: #f0f8ff;
    color: #1677ff;
  }
}
</style>
